<!--
 * @Author: Liang 1931226988@qq.com
 * @Date: 2023-08-19 08:52:09
 * @LastEditors: Liang 1931226988@qq.com
 * @LastEditTime: 2023-08-21 15:01:25
 * @FilePath: \WanYi\src\pages\home\home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="home">
    <v-advertisement></v-advertisement>
    <div class="header">
      <v-advertisement></v-advertisement>
      <div class="top">
        <div class="title">网易严选</div>
        <div class="search">
          <image
            class="img"
            src="@/static/image/搜索.png"
            mode="scaleToFill"
          />
          <p>123</p>
        </div>
        <div class="login">登陆</div>
      </div>
      <div class="bottom">
        <scroll-view scroll-x enable-flex :class="['home_bottom_left']">
          <div
            :class="{ home_bottom_left_item: true, active: topNav == index }"
            v-for="(item, index) in 11"
            :key="index"
            @click="changeTopNav(index)"
          >
            推荐
          </div>
        </scroll-view>
        <div class="home_bottom_right"></div>
      </div>
    </div>

    <div class="center">
      <swiper indicator-dots autoplay circular class="sw">
        <swiper-item
          v-for="(item, index) in pageInfo.data?.focusList"
          :key="item.id"
        >
          <image class="img" :src="item.picUrl" mode="widthFix" />
        </swiper-item>
      </swiper>

      <div class="m-indexServicePolicy">
        <div class="item">
          <div class="left">
            <image
              class="img"
              src="https://yanxuan.nosdn.127.net/a03dd909803b9ac032eba58b7253a2f6.png"
              mode="scaleToFill"
            />
          </div>
          <div class="right">网易自营品牌</div>
        </div>
        <div class="item">
          <div class="left">
            <image
              class="img"
              src="https://yanxuan.nosdn.127.net/2d0402ffcd52b3ec3b07422681c42a89.png"
              mode="scaleToFill"
            />
          </div>
          <div class="right">30天无忧退货</div>
        </div>
        <div class="item">
          <div class="left">
            <image
              class="img"
              src="https://yanxuan.nosdn.127.net/eb61ee48e8942dbd1784c9ee75ebe955.png"
              mode="scaleToFill"
            />
          </div>
          <div class="right">48小时快速退款</div>
        </div>
      </div>

      <div class="nav">
        <div
          class="item"
          v-for="(item, index) in pageInfo.data?.kingKongModule.kingKongList"
          :key="index"
        >
          <image class="img" :src="item.picUrl" mode="scaleToFill" />
          <div class="title">{{ item.text }}</div>
        </div>
      </div>

      <div class="floor">
        <a
          ref="floor_wrap"
          :href="item.targetUrl"
          class="floor_wrap"
          v-for="(item, index) in pageInfo.data?.bigPromotionModule.floorList[0]
            .cells"
          :key="item.id"
        >
          <image class="promItem" :src="item.picUrl" mode="widthFix"
        /></a>
      </div>

      <div class="m-freshmanModule">
        <div class="moduleTitle">
          <span class="left"></span>
          新人专享礼
          <span class="right"></span>
        </div>
        <div class="content">
          <div class="left">
            <div class="title">新人专享礼包</div>
            <image
              class="img"
              src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png"
              mode="widthFix"
            />
          </div>
          <div class="right">
            <div class="item acc">
              <div class="item_left">
                <div class="item_left_top">
                  {{ pageInfo.data?.indexActivityModule[0].title }}
                </div>
                <div class="item_left_bottom">
                  {{ pageInfo.data?.indexActivityModule[0].subTitle }}
                </div>
              </div>
              <div class="item_right">
                <image
                  class="img"
                  :src="pageInfo.data?.indexActivityModule[0].picUrl"
                  mode="widthFix"
                />
              </div>
            </div>
            <div class="item aee">
              <div class="item_left">
                <div class="item_left_top">
                  {{ pageInfo.data?.indexActivityModule[1].title }}
                </div>
                <div class="item_left_bottom">
                  {{ pageInfo.data?.indexActivityModule[0].subTitle }}
                </div>
              </div>
              <div class="item_right">
                <image
                  class="img"
                  :src="pageInfo.data?.indexActivityModule[1].picUrl"
                  mode="widthFix"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="hot">
        <div class="title">
          {{ pageInfo.data?.categoryHotSellModule.title }}
        </div>
        <div class="context">
          <div class="top">
            <div class="top_item top_color_1">
              <div class="top_item_test">
                {{
                  pageInfo.data?.categoryHotSellModule.categoryList[0]
                    .categoryName
                }}
              </div>
              <div class="top_item_a"></div>
              <image
                class="img"
                :src="
                  pageInfo.data?.categoryHotSellModule?.categoryList[0].picUrl
                "
                mode="heightFix"
              />
            </div>
            <div class="top_item top_color_2">
              <div class="top_item_test">
                {{
                  pageInfo.data?.categoryHotSellModule.categoryList[1]
                    .categoryName
                }}
              </div>
              <div class="top_item_a"></div>
              <image
                class="img"
                :src="
                  pageInfo.data?.categoryHotSellModule.categoryList[1].picUrl
                "
                mode="heightFix"
              />
            </div>
          </div>
          <div class="wrap">
            <template
              v-for="(item, index) in pageInfo.data?.categoryHotSellModule
                ?.categoryList"
              :key="item.id"
            >
              <div class="item" v-if="index > 1">
                <div class="item_test">{{ item.categoryName }}</div>
                <image class="img" :src="item.picUrl" mode="widthFix" />
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import Ajax from "@/api/index";
import { ref } from "vue";

// 存储页面数据
const pageInfo = ref<any>({});
// 控制页面顶部导航选中
const topNav = ref<number>(0);
// 控制页面id
const pageId = ref<number>(1005000);

// 获取页面元素
const floor_wrap = ref();

// 获取页面数据
const getData = async () => {
  const time = Date.now();
  const res: any = await Ajax.reqHomeInfo(time);
  const res2: any = await Ajax.reqChannelInfo(time, pageId.value);
  console.log(res);
  console.log(res2);
  if (res.code == 200) {
    pageInfo.value = res.data;
  }
  console.log(floor_wrap.value);
};

// 切换顶部导航
const changeTopNav = (index: any) => {
  topNav.value = index;
};

onMounted(() => {
  getData();
});
</script>

<style scoped lang="less">
.home {
  .header {
    box-sizing: border-box;
    z-index: 999;
    width: 100vw;
    position: fixed;
    top: 0;
    // padding: 10rpx;
    background-color: #fff;
    .top {
      padding: 10rpx;
      display: flex;
      .title {
        font-weight: bold;
        font-size: 36rpx;
      }
      .search {
        display: flex;
        align-items: center;
        margin-left: 10rpx;
        flex: 1;
        border-radius: 10rpx;
        background-color: #ededed;
        .img {
          margin-left: 40rpx;
          margin-right: 10rpx;
          width: 36rpx;
          height: 36rpx;
        }
      }
      .login {
        margin: 10rpx;
        margin-right: 0;
        padding: 5rpx 10rpx;
        border: 1px solid red;
        border-radius: 10rpx;
        font-size: 26rpx;
        color: red;
      }
    }
    .bottom {
      padding: 10rpx;
      padding-top: 20rpx;
      display: flex;
      justify-content: space-between;
      .home_bottom_left {
        display: flex;

        flex: 8;
        height: 60rpx;
        .home_bottom_left_item {
          padding: 0 20rpx;
          flex-shrink: 0;
        }
        .active {
          border-bottom: 6rpx solid #dd1a21;
        }
      }
      .home_bottom_right {
        flex: 2;
      }
    }
  }

  .center {
    margin-top: 156rpx;
    .sw {
      .img {
        width: 100%;
      }
    }

    .m-indexServicePolicy {
      margin: 20rpx 0;
      display: flex;
      justify-content: space-around;
      font-size: 28rpx;
      .item {
        display: flex;
      }
      .img {
        width: 36rpx;
        height: 36rpx;
        margin-right: 6rpx;
        align-items: center;
      }
    }
  }

  .floor {
    display: flex;
    justify-content: space-between;
    .floor_wrap {
      flex: 1;
    }
    .promItem {
      width: 100%;
      margin-top: 20rpx;
    }
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;
      .img {
        width: 124rpx;
        height: 124rpx;
      }
      .title {
        margin-top: 10rpx;
        font-size: 28rpx;
      }
    }
  }

  .m-freshmanModule {
    .moduleTitle {
      margin: 40rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .left,
      .right {
        margin: 0 20rpx;
        display: inline-block;
        height: 4rpx;
        width: 40rpx;
        background-color: black;
      }
    }
    .content {
      padding: 0 20rpx;
      display: flex;
      .left {
        padding: 10rpx;
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 440rpx;
        border: 1px solid red;
        background-color: #f9e9cf;
        justify-content: center;
        .img {
          width: 300rpx;
          margin: 0 auto;
          margin-top: 30rpx;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        flex: 1;
        // height: 100rpx;
        border: 1px solid skyblue;
        .acc {
          background-color: #fbe2d3;
        }
        .aee {
          background-color: #ffecc2;
        }
        .item {
          position: relative;
          flex: 1;
          display: flex;
          .item_left {
            position: absolute;
            z-index: 1;
            padding: 10rpx;
            // flex: 1;
            border: 1px solid blue;
            .item_left_top {
              font-size: 36rpx;
            }
            .item_left_bottom {
              font-size: 24rpx;
              color: #999;
            }
          }
          .item_right {
            flex: 1;
            border: 1px solid greenyellow;
            .img {
              position: absolute;
              right: 0;
              width: 180rpx;
            }
          }
        }
      }
    }
  }

  .hot {
    padding: 20rpx;
    margin-top: 80rpx;
    .title {
      margin-bottom: 20rpx;
    }
    .context {
      border: 1px solid red;
      .top {
        display: flex;
        justify-content: space-between;
        .top_color_1 {
          background-color: #f9f3e4;
        }
        .top_color_2 {
          background-color: #ebeff6;
        }
        .top_item {
          position: relative;
          width: 49%;
          height: 224rpx;
          border: 1px solid blueviolet;
          .img {
            position: absolute;
            height: 80%;
            right: 0;
            top: 10%;
          }
          .top_item_test {
            position: absolute;
            top: 30%;
            left: 6%;
          }
          .top_item_a {
            position: absolute;
            top: 55%;
            left: 6%;
            width: 15%;
            height: 4rpx;
            background-color: black;
          }
        }
      }

      .wrap {
        display: flex;
        flex-wrap: wrap;
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 10rpx 0;
          margin-right: 4rpx;
          width: 24%;
          height: 200rpx;
          border: 1px solid forestgreen;
          font-size: 28rpx;
          background-color: #f5f5f5;
          .img {
            width: 80%;
          }
        }
        .item:nth-child(4),
        .item:nth-child(8) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
